<%-- 
    Document   : userRegistration
    Created on : 2011. 12. 7, 오후 9:10:16
    Author     : The Lunatics
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>User Registration Page</title>

        <!-- CSS -->
        <link rel="stylesheet" href="structure.css" type="text/css" />
        <link rel="stylesheet" href="form.css" type="text/css" />
        <!-- JavaScript -->
        <script src="/scripts/wufoo.js"></script>
        <!--[if lt IE 10]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <script>
            function Button1_onclick() {
                if(document.myForm.id.value == "")
                    alert("Your ID must not be null!!!")
                else if(document.myForm.lastName.value == "")
                    alert("Your Name must not be null!!!")
                else if(document.myForm.pw1.value == "")
                    alert("Your Password must not be null!!!")
                else if(document.myForm.pw1.value != document.myForm.pw2.value)
                    alert("The Two Passwords Should Be the SAME!!!")
                else{document.myForm.submit()}
            }

            function Button2_onclick() {
                window.open("index.jsp","_self");
            }
        </script>
    </head>
    <body>
        <div id="container" class="ltr">

            <h1 id="logo">
                <a href="http://wufoo.com" title="Powered by Wufoo">Wufoo</a>
            </h1>

            <form id="myForm" name="form69" class="wufoo topLabel page" autocomplete="off" method="post" novalidate
                  action="userRegistration">
                <input type="hidden" name="action" value="userRegistration"/>

                <header id="header" class="info">
                    <h2>Account Registration</h2>
                </header>

                <ul>
                    <li id="foli0" class="notranslate      ">
                        <label class="desc" id="title0" for="Field0">
                            ID / PW
                        </label>
                        <span>
                            <input id="Field0" name="id" type="text" class="field text fn" value="" size="8" tabindex="1" />
                            <label for="Field0">ID</label>
                        </span>
                        <!--                    </li>
                                            <li id="foli1" class="notranslate      ">-->
                        <!-- <label class="desc" id="title1" for="Field1">
                            Password : 
                        </label>-->
                        <span>
                            <input id="Field1" name="pw1" type="password" class="field text ln" value="" size="14" tabindex="2" />
                            <label for="Field1">Password</label>
                        </span>
                        <span>
                            <input id="Field2" name="pw2" type="password" class="field text ln" value="" size="14" tabindex="2" />
                            <label for="Field1">Confirm Password</label>
                        </span>
                    </li>
                    <li id="foli1" class="notranslate      ">
                        <label class="desc" id="title1" for="Field1">
                            SSN Number *
                        </label>
                        <span>
                            <input id="Field0" name="ssn" type="text" class="field text fn" value="" size="8" tabindex="3" />
                            <label for="Field0"></label>
                        </span>
                    </li>
                      <li id="foli1-1" class="notranslate      ">
                        <label class="desc" id="title1-1" for="Field1-1">
                            Sex
                        </label>
                        <span>
                            <input id="Field0" name="sex" type="text" class="field text fn" value="" size="8" tabindex="3" />
                            <label for="Field0">M / F</label>
                        </span>
                    </li>
                    <li id="foli2" class="notranslate      ">
                        <label class="desc" id="title2" for="Field">
                            Name
                        </label>
                        <span>
                            <input id="Field0" name="firstName" type="text" class="field text fn" value="" size="8" tabindex="4" />
                            <label for="Field0">First</label>
                        </span>
                        <span>
                            <input id="Field1" name="lastName" type="text" class="field text ln" value="" size="14" tabindex="5" />
                            <label for="Field1">Last*</label>
                        </span>
                    </li>
                    <li id="foli3" class="complex notranslate      ">
                        <label class="desc" id="title3" for="Field3">
                            Address
                            <span id="req_2" class="req">*</span>
                        </label>
                        <div>
                            <span class="full addr1">
                                <input id="Field2" name="address" type="text" class="field text addr" value="" tabindex="5" required />
                                <label for="Field2">Address</label>
                            </span>
                            <!--                            <span class="full addr2">
                                                            <input id="Field3" name="a" type="text" class="field text addr" value="" tabindex="4" />
                                                            <label for="Field3">Address Line 2</label>
                                                        </span>-->
                            <span class="left city">
                                <input id="Field4" name="city" type="text" class="field text addr" value="" tabindex="5" required />
                                <label for="Field4">City</label>
                            </span>
                            <span class="right state">
                                <input id="Field5" name="state" type="text" class="field text addr" value="" tabindex="6" required />
                                <label for="Field5">State / Province / Region</label>
                            </span>
                            <span class="left zip">
                                <input id="Field6" name="zipCode" type="text" class="field text addr" value="" maxlength="15" tabindex="7" required />
                                <label for="Field6">Postal / Zip Code</label>
                            </span>

                        </div>
                    </li>
                    <li id="foli8" class="phone notranslate leftHalf     ">
                        <label class="desc" id="title8" for="Field8">
                            Phone
                        </label>
                        <span>
                            <input id="Field8" name="telephone" type="tel" class="field text" value="" size="10" maxlength="10" tabindex="9" />
                            <label for="Field8"></label>
                        </span>
                        <!--                        
                        <span class="symbol">-</span>
                                                <span>
                                                    <input id="Field8-1" name="Field8-1" type="tel" class="field text" value="" size="3" maxlength="3" tabindex="10" />
                                                    <label for="Field8-1">###</label>
                                                </span>
                                                <span class="symbol">-</span>
                                                <span>
                                                    <input id="Field8-2" name="Field8-2" type="tel" class="field text" value="" size="4" maxlength="4" tabindex="11" />
                                                    <label for="Field8-2">####</label>
                                                </span>
                        -->
                    </li>
                    <li id="foli9" class="notranslate rightHalf     ">
                        <label class="desc" id="title9" for="Field9">
                            Email
                            <span id="req_9" class="req">*</span>
                        </label>
                        <div>
                            <input id="Field9" name="emailAddress" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="12" required /> 
                        </div>
                    </li>
                    <li id="foli12" class="date notranslate leftHalf     ">
                        <label class="desc" id="title12" for="Field12">
                            Arrival Date
                        </label>
                        <span>
                            <input id="Field12-1" name="month" type="text" class="field text" value="" size="2" maxlength="2" tabindex="13" />
                            <label for="Field12-1">MM</label>
                        </span> 
                        <span class="symbol">/</span>
                        <span>
                            <input id="Field12-2" name="day" type="text" class="field text" value="" size="2" maxlength="2" tabindex="14" />
                            <label for="Field12-2">DD</label>
                        </span>
                        <span class="symbol">/</span>
                        <span>
                            <input id="Field12" name="year" type="text" class="field text" value="" size="4" maxlength="4" tabindex="15" />
                            <label for="Field12">YYYY</label>
                        </span>
                        <span id="cal12">
                            <img id="pick12" class="datepicker" src="images/calendar.png" alt="Pick a date." />
                        </span>
                    </li>

                    <!--                    <li id="foli10" class="notranslate       ">
                                            <label class="desc" id="title10" for="Field10">
                                                Accommodation Status
                                            </label>
                                            <div>
                                                <select id="Field10" name="Field10" class="field select medium" tabindex="19" > 
                                                    <option value="" selected="selected">
                                                    </option>
                                                    <option value="Single" >
                                                        Single
                                                    </option>
                                                    <option value="Couple" >
                                                        Couple
                                                    </option>
                                                    <option value="Group" >
                                                        Group
                                                    </option>
                                                    <option value="Family" >
                                                        Family
                                                    </option>
                                                    <option value="Roommate Selected" >
                                                        Roommate Selected
                                                    </option>
                                                    <option value="Need Roommate" >
                                                        Need Roommate
                                                    </option>
                                                    <option value="Without Accommodations" >
                                                        Without Accommodations
                                                    </option>
                                                </select>
                                            </div>
                                        </li>-->
                    <!--                    <li id="foli11" 
                                            class="notranslate      "><label class="desc" id="title11" for="Field11">
                                                Special Needs
                                            </label>
                    
                                            <div>
                                                <textarea id="Field11" 
                                                          name="Field11" 
                                                          class="field textarea medium" 
                                                          spellcheck="true" 
                                                          rows="10" cols="50" 
                                                          tabindex="20" 
                                                          onkeyup=""
                                                          ></textarea>
                    
                                            </div>
                                        </li> -->
                    <li class="buttons ">
                        <!-- <div>
                         <input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Submit"
                        /></div>-->
                        <input id="Button1" type="button" value="Finish" onclick="Button1_onclick();" />
                        &nbsp;
                        <input id="Button2" type="button" value="Cancel" onclick="Button2_onclick();" />

                    </li>
                </ul>

            </form>

        </div><!--container-->

        <div id="footer">
            <%@include file="footer.jspf" %>
        </div>
    </body>
</html>
